<template>
	<div class="details-reommend-combanation mt16" v-if="reommend">
		<h4 class="title">推荐组合套餐</h4>
		<div class="reommend-combanation-content h_box" ca="P_{{spuName}}$跳转到组合套餐" @click="linkRouterGo(mainCode)">
			<div class="reommend-combanation-left h_box">
				<ul class="" v-for="(idx, item) in combonation" style="width: {{100 / combonation.length}}%">
					<li class="h_box flex_1">
						<div class="list-des">
						<!-- v-link="'/details/'+item.mdseCode" ca="P_{{spuName}}${{item.skuName}}"-->
							<a  ><img :src="item.mdseMobilePrimaryImg" alt="{{item.skuName}}">
							<p>{{item.skuName}}</p></a>
						</div>
						<h1 class="pl20rem" v-if="idx >= (combonation.length-1) ? false : true">
							<a class="combanation-plus"><img src="../../assets/images/plus.png"></a>
						</h1>
					</li>
				</ul>
			</div>
			<div class="reommend-combanation-right h_box flex_pjustify">
				<div>
					<strong>套餐价</strong>
					<div class="price">￥ <span>{{ cashPrice }}</span></div>
					<span class="combanation-right" v-if="savePrice">省 ￥{{savePrice}}</span>
				</div>
				
				<!-- ca="P_{{spuName}}$跳转到组合套餐" @click="linkRouterGo(mainCode)" -->
				<a class="arrow sf-arrow-right" ></a>
				<!-- aaaa -->
				<!-- <a class="arrow sf-arrow-right"  v-link="{ path:'/details/'+ mainCode }"></a> -->
				
			</div>
		</div>

	</div>
	
</template>

<script>
	
export default {
	data: function () {
		return {			
			combonation: [], // 推荐组合
			cashPrice:'',  //价格
			savePrice:'',  //节省价格
			mainCode:'',   //组合商品 code
			reommend: '',
			spuName: '' //用于埋点
		}
	},
	methods:{

		linkRouterGo:function(mainCode){
			console.log(mainCode);
			this.$router.go({ path:'/details/'+ mainCode });
			location.reload();
		}
	},
	events: {
		recommendCombonationDataEvent: function ( data, spuName ) {
			if(!data || !data.mdseCacheConbineList[0]){
				this.reommend = false;
				return;
			}
			if ( data ) {
				debugger;
				this.reommend = data.mdseCacheConbineList[0].conitemList.length==0?false:true;
				this.combonation = data.mdseCacheConbineList[0].conitemList;
				
				// 套餐价
				this.mainCode =  data.mdseCacheConbineList[0].mdseCode;
				this.savePrice = data.status;

				this.cashPrice = data.mdseCacheConbineList[0].cashPrice;
				this.savePrice = data.mdseCacheConbineList[0].discountCashPrice;

				this.spuName = spuName;
				
	//			this.combonation = data.conitemList;
	//			this.cashPrice = data.cashPrice;
	//			this.savePrice = data.status;
	//			this.mainCode = data.mainSkuCode;
				console.log("数据");
				console.log(this.combonation);
			}
			

		}
	}
}

</script>

<style lang="scss" scoped>

@import '../../assets/css/_functions.scss';
@import '../../assets/css/_variables.scss';
	
	.details-reommend-combanation {
		background-color: $_fff;
		.title{
			padding-left: rem(15);
			border-bottom: 1px solid #_dedede;
	       	padding-top: rem(12);
	        	padding-bottom: rem(15);
			font-size: rem(14);
		}
		.reommend-combanation-content {
			justify-content: space-between;
			padding: rem(12) rem(14);
			li {
				min-width: rem(80);
			}
			.list-des {
				width: rem(58);
				font-size: rem(12);
				text-align: center;
				p {
					margin-top: rem(4);
					height: rem(32);
					overflow: hidden;
					line-height: rem(15);
				}
				img {
					width: rem(50);
					height: rem(50);
				}
				a {
					color: $_333;
				}
			}
			.combanation-plus {
				line-height: rem(82);
				margin-left: rem(4);
			}
		}
		.reommend-combanation-left {
			width:rem(240);
			overflow: hidden;
			overflow-x:auto; 
			.pl20rem {
				padding-left: rem(20);
			}
		}

		.reommend-combanation-right {
			position: relative;
			width:rem(80);

			>div {
				strong {
					display: inline-block;
					margin-top: rem(14);
					font-size: rem(14);
					color: $_333;
				}
				.price {
					color: $_price;
					font-size: rem(12);
					line-height: rem(28);
					span {
						font-size: rem(14);
					}
				}
				.combanation-right {
					color: $_999;
				}
			}
			.arrow {
				line-height: rem(86);
				position: absolute;
				right: 0;
				top: 43%;
			}
		}
	}

</style>